<template>
  <div class="tab_bar">
    <div class="wrap tab_wrap">
      <div class="l">欢迎来到叩丁狼积分商城</div>
      <div class="r">
        <ul>
          <li @click="ToShowtoastClick">
            <img class="avater" :src="userInfo.headImg" alt="" width="26px" />
            用户名：{{ userInfo.nickName }}
          </li>
          <li>我的鸡腿: {{ userInfo.coin }}</li>
          <li>获取鸡腿</li>
          <li>叩丁狼官网</li>
          <li class="login_btn" @click="togin" v-show="!islogined">登录</li>
          <li class="login_btn" v-show="islogined" @click="cartClick">
            <img src="../assets/img/cart.png" alt="" />
            <span>购物车</span>
            <b>{{ cartTotal }}</b>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import { WeixinLoginAPI } from "../request/api";
export default {
  data() {
    return {
      // cartNum: 0,
    };
  },
  computed: {
    ...mapState({
      islogined: (state) => state.Loginstatus.islogined,
      cartTotal: (state) => state.UserInfo.cartTotal,
      userInfo: (state) => state.UserInfo.userInfo,
    }),
  },
  // watch:{
  //   // 监听路由的切换
  //   "$route.path":{
  //     handler(newVal,oldVal){
  //       // 如果x-auth-token不存在  改变登录状态为false
  //       let mytoken=localStorage.getItem("x-auth-token");
  //       // if(mytoken){
  //       //   this.chanIslogined(true);
  //       // }else{
  //       //   this.chanIslogined(false);
  //       // }
  //       // 上面代码相等于下面这行代码
  //       this.chanIslogined(Boolean(mytoken))
  //     }
  //   }
  // },
  // 路由切换的时候让TopBar组件重载，效果就是路由的切换也能引起created的执行
  created() {
    this.$nextTick().then(async () => {
      let mycode = this.$route.query.code;
      if (mycode) {
        // 发起扫码登录请求
        let res = await WeixinLoginAPI({
          code: mycode,
        });

        if (res.code == 0) {
          // 登录成功
          if (res) {
            console.log(res);
            // 登录成功后的操作
            // 1 提示用户登录成功
            this.asyncchanToShowtoast({
              msg: "登录成功",
              type: "success",
            });
            // 2 保存token值到localStorage中
            localStorage.setItem("x-auth-token", res["x-auth-token"]);
            // 3 登录状态的切换（隐藏登录按钮展示购物车按钮，用户昵称头像）
            this.chanIslogined(true);

            // 4 清除浏览器地址栏上面的code
            this.$router.push(this.$route.path);
            // 登录成功后，发送获取用户信息
            this.asyncChanUserInfo();
          }
          console.log(res.code);
        } else if (res.code == 400) {
          // code过期的情况
          // 提示用户重新扫码
          this.asyncchanToShowtoast({
            msg: "二维码已失效，请重新扫码登录",
            type: "warning",
          });
          // 打开模态框窗口
          this.chanisShowLoginModal(true);
          // 显示微信登录页面
          this.chanIsShowForm(false);
        } else if (res.code == 407) {
          // 用户的微信还么有在这个网站上绑定手机
          // 让用户绑定手机
          // 怎么绑定手机?用手机登录并携带uuid，后端会自动绑定
          this.asyncchanToShowtoast({
            msg: "请绑定手机号",
            type: "warning",
          });
          // 打开模态框窗口
          this.chanisShowLoginModal(true);
          // 显示微信登录页面
          this.chanIsShowForm(true);
          // 保存uuid
          localStorage.setItem("uuid", res.uuid);
        }
        console.log(res);
      } else {
        // 获取token值
        let mytoken = localStorage.getItem("x-auth-token");
        // 判断token值是否存在，来切换登录状态
        this.chanIslogined(Boolean(mytoken));
        if (mytoken) {
          // 有登录的情况，发送获取用户信息的请求
          this.asyncChanUserInfo();
         
        } else {
          // 没有登录的情况，初始化用户信息
          this.initUserInfo();
        }
      }
    });
  },
  methods: {
    ...mapMutations({
      // 控制模态框的登录和隐藏
      chanisShowLoginModal: "ShowLoginModal/chanisShowLoginModal",
      // 控制登录提示框的显示和隐藏
      // chanToShowtoast: "ShowToast/chanToShowtoast",
      chanIsShowForm: "ShowForm/chanIsShowForm",
      chanIslogined: "Loginstatus/chanIslogined",
      initUserInfo: "UserInfo/initUserInfo",
    }),
    ...mapActions({
      asyncchanToShowtoast: "ShowToast/asyncchanToShowtoast",
      asyncChanUserInfo: "UserInfo/asyncChanUserInfo",
    }),
    // 点击登录，显示模态框，本质上是修改state里面的isShowLoginModal的值为true
    togin() {
      this.chanisShowLoginModal(true);
    },
    // 点击用户名，显示登录提示框
    ToShowtoastClick() {
      this.asyncchanToShowtoast({
        msg: "请先登录",
        type: "warning",
      });
    },
    // 点击购物车
    cartClick(){
       this.$router.push("/user");
    }
  },
};
</script>
 
<style lang = "less" scoped>
.tab_bar {
  height: 40px;
  background: #242b39;
  .tab_wrap {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* 字体样式 */
    font-size: 14px;
    font-family: SourceHanSansSC;
    font-weight: 300;
    color: #fffefe;
    line-height: 23px;
    .r {
      ul {
        display: flex;
        li {
          display: flex;
          align-items: center;
          margin-left: 22px;
          cursor: pointer;
          .avater {
            border-radius: 50%;
            padding: 6px;
          }
          &.login_btn {
            width: 124px;
            height: 40px;
            background: #0a328e;
            display: flex;
            justify-content: center;
            box-sizing: border-box;
            span {
              padding: 0 10px;
            }
            b {
              width: 20px;
              height: 20px;
              background-color: #f40;
              text-align: center;
              line-height: 20px;
              border-radius: 50%;
            }
          }
        }
      }
    }
  }
}
</style>